{{>layout/header}}

<div class="row">
    <div class="col-md-12">

        <span>{{count}} instances</span>

        <table class="table table-striped">
            <thead>
            <th>Process Instance Key</th>
            <th>BPMN process id</th>
            <th>Process Definition Key</th>
            <th>State</th>
            <th>Start Time
                <a id="instance-start-time" href="#" class="badge badge-secondary" data-toggle="tooltip" data-placement="top"
                   title="Sort by Start Time">
                </a>
            </th>
            </thead>

            {{#instances}}
            <tr>
                <td>
                    <a href="{{context-path}}views/instances/{{processInstanceKey}}">{{processInstanceKey}}</a>
                </td>
                <td>{{bpmnProcessId}}</td>
                <td>
                    <a href="{{context-path}}views/processes/{{processDefinitionKey}}">{{processDefinitionKey}}</a>
                </td>
                <td>{{state}}</td>
                <td>{{startTime}}</td>
            </tr>
            {{/instances}}

        </table>

        {{>components/table-pagination}}

    </div>
</div>

{{>layout/footer}}

<script>
    document.addEventListener('DOMContentLoaded', function(){
        listSort('start','instance-start-time')
    }, false);
</script>
